<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑API - API文档管理系统</title>
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap/font/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" th:href="@{/api-doc/}">
                    <i class="bi bi-book"></i>
                    API文档管理系统
                </a>
                <div class="navbar-nav ms-auto">
                    <a class="nav-link" th:href="@{/api-doc/}">
                        <i class="bi bi-house"></i>
                        首页
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/list}">
                        <i class="bi bi-list"></i>
                        API列表
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/app-service/list}">
                        <i class="bi bi-server"></i>
                        应用服务
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/create}">
                        <i class="bi bi-plus-circle"></i>
                        新增API
                    </a>
                    <a class="nav-link" th:href="@{/swagger-ui/index.html}" target="_blank">
                        <i class="bi bi-code-square"></i>
                        Swagger UI
                    </a>
                </div>
            </div>
        </nav>

        <!-- 错误信息显示 -->
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-dismiss="alert"></button>
        </div>

        <!-- 编辑API表单 -->
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-pencil"></i>
                            编辑API文档
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="#" th:action="@{/api-doc/edit/{id}(id=${api.id})}" th:object="${apiInfoRequest}" method="post">
                            <!-- API基本信息 -->
                            <div class="mb-3">
                                <label for="name" class="form-label">
                                    <i class="bi bi-bookmark"></i>
                                    API名称 *
                                </label>
                                <input type="text" class="form-control" id="name" name="name" th:value="${api.name}" required>
                                <div class="form-text">请输入API的名称，如"用户登录"</div>
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">
                                    <i class="bi bi-chat-text"></i>
                                    API描述
                                </label>
                                <textarea class="form-control" id="description" name="description" rows="3" th:text="${api.description}"></textarea>
                                <div class="form-text">请输入API的详细描述信息</div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="method" class="form-label">
                                        <i class="bi bi-arrow-left-right"></i>
                                        请求方法 *
                                    </label>
                                    <select class="form-select" id="method" name="method" required>
                                        <option value="">请选择请求方法</option>
                                        <option value="GET" th:selected="${api.method == 'GET'}">GET</option>
                                        <option value="POST" th:selected="${api.method == 'POST'}">POST</option>
                                        <option value="PUT" th:selected="${api.method == 'PUT'}">PUT</option>
                                        <option value="DELETE" th:selected="${api.method == 'DELETE'}">DELETE</option>
                                        <option value="PATCH" th:selected="${api.method == 'PATCH'}">PATCH</option>
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="path" class="form-label">
                                        <i class="bi bi-link"></i>
                                        API路径 *
                                    </label>
                                    <input type="text" class="form-control" id="path" name="path" th:value="${api.path}" placeholder="/api/v1/users" required>
                                    <div class="form-text">请输入API的访问路径</div>
                                </div>
                            </div>

                            <!-- 应用服务选择 -->
                            <div class="mb-3">
                                <label for="appServiceId" class="form-label">
                                    <i class="bi bi-server"></i>
                                    关联应用服务
                                </label>
                                <select class="form-select" id="appServiceId" name="appServiceId">
                                    <option value="">请选择关联的应用服务（可选）</option>
                                    <option th:each="appService : ${appServices}" 
                                            th:value="${appService.id}" 
                                            th:text="${appService.name + ' (' + appService.protocol + '://' + appService.ipAddress + ':' + appService.port + ')'}"
                                            th:selected="${api.appServiceId != null and api.appServiceId == appService.id}">
                                    </option>
                                </select>
                                <div class="form-text">选择关联的应用服务，API测试时将使用该服务的协议、IP和端口</div>
                            </div>

                            <!-- 请求参数 -->
                            <div class="mb-3">
                                <label for="requestParams" class="form-label">
                                    <i class="bi bi-list-task"></i>
                                    请求参数
                                </label>
                                <textarea class="form-control" id="requestParams" name="requestParams" rows="4" th:text="${api.requestParams}" placeholder="参数名: 参数类型: 是否必填: 参数说明
示例:
username: string: 是: 用户名
password: string: 是: 密码"></textarea>
                                <div class="form-text">请输入API的请求参数信息，每行一个参数</div>
                            </div>

                            <!-- 请求示例 -->
                            <div class="mb-3">
                                <label for="requestExample" class="form-label">
                                    <i class="bi bi-code"></i>
                                    请求示例
                                </label>
                                <textarea class="form-control" id="requestExample" name="requestExample" rows="6" th:text="${api.requestExample}" placeholder="GET /api/v1/users?name=张三

POST /api/v1/users
{
  &quot;username&quot;: &quot;zhangsan&quot;,
  &quot;password&quot;: &quot;123456&quot;
}"></textarea>
                                <div class="form-text">请输入API的请求示例</div>
                            </div>

                            <!-- 响应示例 -->
                            <div class="mb-3">
                                <label for="responseExample" class="form-label">
                                    <i class="bi bi-code-slash"></i>
                                    响应示例
                                </label>
                                <textarea class="form-control" id="responseExample" name="responseExample" rows="6" th:text="${api.responseExample}" placeholder="{
  &quot;code&quot;: 200,
  &quot;message&quot;: &quot;success&quot;,
  &quot;data&quot;: {
    &quot;id&quot;: 1,
    &quot;username&quot;: &quot;zhangsan&quot;,
    &quot;createTime&quot;: &quot;2023-01-01T12:00:00&quot;
  }
}"></textarea>
                                <div class="form-text">请输入API的响应示例</div>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <a th:href="@{/api-doc/list}" class="btn btn-secondary me-md-2">
                                    <i class="bi bi-arrow-left"></i>
                                    返回列表
                                </a>
                                <button type="reset" class="btn btn-outline-secondary me-md-2">
                                    <i class="bi bi-arrow-counterclockwise"></i>
                                    重置
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-save"></i>
                                    保存API
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
</body>
</html>